@import "../../themes/ionic.globals.ios";

// iOS Range
// --------------------------------------------------

/// @prop - Padding top/bottom of the range
$range-ios-padding-vertical: 8px !default;

/// @prop - Padding start/end of the range
// TODO FW-2997 Remove this
$range-ios-padding-horizontal: 16px !default;

/// @prop - Padding start/end of the range - modern syntax
/**
 * 24px was chosen so the knob and its
 * shadow do not get cut off by the item.
 */
$range-ios-item-padding-horizontal: 24px !default;

/// @prop - Height of the range slider
$range-ios-slider-height: 42px !default;

/// @prop - Height of the area that will select the range knob
$range-ios-hit-height: $range-ios-slider-height !default;

/// @prop - Height of the range bar
$range-ios-bar-height: 4px !default;

/// @prop - Background of the range bar
$range-ios-bar-background-color: var(--ion-color-step-900, #e6e6e6) !default;

/// @prop - Border radius of the range bar
$range-ios-bar-border-radius: 2px !default;

/// @prop - Width of the range knob
$range-ios-knob-width: 26px !default;

/// @prop - Box shadow of the range knob
$range-ios-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12) !default;

/// @prop - Background of the range knob
$range-ios-knob-background-color: #ffffff !default;

/// @prop - Width of the range tick
$range-ios-tick-width: $range-ios-bar-height !default;

/// @prop - Height of the range tick
$range-ios-tick-height: 8px !default;

/// @prop - Border radius of the range tick
$range-ios-tick-border-radius: 0 !default;

/// @prop - Background of the range tick
$range-ios-tick-background-color: $range-ios-bar-background-color !default;

/// @prop - Background of the range pin
$range-ios-pin-background-color: transparent !default;

/// @prop - Color of the range pin
$range-ios-pin-color: $text-color !default;

/// @prop - Font size of the range pin
$range-ios-pin-font-size: dynamic-font(12px) !default;

/// @prop - Padding top of the range pin
$range-ios-pin-padding-top: 8px !default;

/// @prop - Padding end of the range pin
$range-ios-pin-padding-end: $range-ios-pin-padding-top !default;

/// @prop - Padding bottom of the range pin
$range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default;

/// @prop - Padding start of the range pin
$range-ios-pin-padding-start: $range-ios-pin-padding-end !default;

/// @prop - Opacity of the disabled range
$range-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;
